﻿<template>
  <el-dialog
    :title="!dataForm.id ? '新建' : '编辑'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="SHZY-dialog SHZY-dialog_center"
    lock-scroll
    width="600px"
  >
    <el-row :gutter="15" class="">
      <el-form
        ref="elForm"
        :model="dataForm"
        size="small"
        label-width="110px"
        label-position="right"
        :rules="rules"
      >
        <el-col :span="24">
          <el-form-item label="检验项目名称" prop="innspectionName">
            <el-input
              v-model="dataForm.innspectionName"
              placeholder="请输入"
              maxlength="200"
              show-word-limit
              clearable
              required
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="有效标志">
            <el-switch
              v-model="dataForm.enabledMark"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form ref="tableForm" :model="dataForm" :rules="tableRules">
            <el-table
              :data="dataForm.children"
              required
              size="mini"
              ref="dragTable"
              :row-key="(row) => row.index"
            >
              <el-table-column
                prop="innspectionName"
                label="检验条目"
                min-width="100"
              >
                <template slot="header">
                  <span class="required-sign">*</span>检验条目
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'children.' + scope.$index + '.innspectionName'"
                    :rules="tableRules.innspectionName"
                  >
                    <el-input
                      v-model="scope.row.innspectionName"
                      placeholder="请输入"
                      maxlength="200"
                      show-word-limit
                      clearable
                      required
                    />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="50">
                <template slot-scope="scope">
                  <el-form-item>
                    <el-button
                      type="text"
                      class="SHZY-table-delBtn"
                      @click="handleDel(scope.$index)"
                      >删除</el-button
                    >
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <div class="table-actions" @click="addHandle()">
            <el-button type="text" icon="el-icon-plus">新建条目</el-button>
          </div>
        </el-col>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import restAPI from "@/api/q1/basedata/innspectionItems";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { getDataInterfaceRes } from "@/api/systemData/dataInterface";
export default {
  components: {},
  props: [],
  data() {
    var validatePass = (rule, value, callback) => {
      if (!value || value.trim().length == 0) {
        callback(new Error("请输入检验项目名称"));
      } else {
        callback();
      }
    };
    var validatePass_tableRules = (rule, value, callback) => {
      if (!value || value.trim().length == 0) {
        callback(new Error("请输入条目"));
      } else {
        callback();
      }
    };
    return {
      btnLoading: false,
      loading: false,
      visible: false,
      dataForm: {
        id: "",
        innspectionName: undefined,
        enabledMark: 1,
        children: [],
      },
      rules: {
        innspectionName: [
          {
            required: true,
            validator: validatePass,
            message: "请输入检验项目名称",
            trigger: '"blur"',
          },
        ],
        // enabledMark: [
        //   {
        //     required: true,
        //     message: "请输入有效标志",
        //     trigger: "change",
        //   },
        // ],
      },
      tableRules: {
        innspectionName: [
          {
            required: true,
            validator: validatePass_tableRules,
            message: "请输入条目",
            trigger: '"blur"',
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    goBack() {
      this.$emit("refresh");
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        this.dataForm.children = [];
        if (this.dataForm.id) {
          restAPI.getInfo(this.dataForm.id).then((res) => {
            this.dataForm = res.data;
            this.dataForm.enabledMark = res.data.enabledMark == "1" ? 1 : 0;
            console.log(res.data);
          });
        }
      });
      this.$store.commit("generator/UPDATE_RELATION_DATA", {});
    },
    handleDel(index, row) {
      this.dataForm.children.splice(index, 1);
    },
    addHandle(row) {
      let item = {};
      item = {
        innspectionName: undefined,
      };
      this.dataForm.children.push(item);
    },
    dataFormSubmit() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          // if (this.dataForm.children.length == 0) {
          //   this.$message({
          //     message: "请添加检验条目",
          //     type: "error",
          //     duration: 1000,
          //   });
          //   return;
          // }
          this.$refs["tableForm"].validate((valid) => {
            if (valid) {
              this.btnLoading = true;
              const arr = [];
              let state = true;
              for (const item of this.dataForm.children) {
                if (arr.indexOf(item.innspectionName.trim()) > -1) {
                  state = false;
                  this.btnLoading = false;
                  this.$message({
                    message: "请勿添加重复条目",
                    type: "error",
                  });
                  return;
                }
                arr.push(item.innspectionName.trim());
              }
              if (state) {
                console.log("asdsd");
                if (!this.dataForm.id) {
                  restAPI
                    .create(this.dataForm)
                    .then((res) => {
                      this.$message({
                        message: res.msg,
                        type: "success",
                        duration: 1000,
                        onClose: () => {
                          this.btnLoading = false;
                          (this.visible = false), this.$emit("refresh", true);
                        },
                      });
                    })
                    .catch((res) => {
                      this.btnLoading = false;
                    });
                } else {
                  restAPI
                    .update(this.dataForm)
                    .then((res) => {
                      this.$message({
                        message: res.msg,
                        type: "success",
                        duration: 1000,
                        onClose: () => {
                          this.btnLoading = false;
                          this.visible = false;
                          this.$emit("refresh", true);
                        },
                      });
                    })
                    .catch((res) => {
                      this.btnLoading = false;
                    });
                }
              }
            }
          });
        }
      });
    },
  },
};
</script>
